<%-- 
    Document   : ciudades
    Created on : 31-may-2012, 15:09:44
    Author     : Administrador
--%>
<%@page import="com.javabeans.Pais"%>
<%@page import="com.javabeans.Ciudad"%>
<%@page import="com.javabeans.Provincia"%>
<%@include file="../../../../controlSession.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    Pais pDefault = (Pais)request.getAttribute("pDefault");
    int idPais = pDefault.getIdPais();
    List<Pais> paises = (List<Pais>)request.getAttribute("paises");
    List<Ciudad> ciudadesPorPais = (List<Ciudad>)request.getAttribute("ciudadesPorPais");
    List<Provincia> privinciasPorPais = (List<Provincia>)request.getAttribute("privinciasPorPais");
    List<Provincia> privinciasPorPaisInactivos = (List<Provincia>)request.getAttribute("privinciasPorPaisInactivos");
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SI-ESFM </title>
        <meta name="description" content="Derechos Reservados SI-ESFM." />
        <link rel="stylesheet" href="<%=s_path%>/css/styles.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/menu/style.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/themes/start/jquery-ui-1.8.20.custom.css" type="text/css" />
        <link rel="shortcut icon" href="<%=s_path%>/images/ico.png" type="image/png"/>
        
        <script type="text/javascript" src="<%=s_path%>/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.core.min.js"></script>  <!--si o si cargar esto-->
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.widget.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.position.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.mouse.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.button.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.draggable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.resizable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.dialog.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.effects.core.min.js"></script>
        
        <script type="text/javascript" src="<%=s_path%>/js/comun.js"></script>
        <script type="text/javascript">
            
            $(document).ready(function(){
                $("#dialogo").dialog({
			autoOpen: false,
                        title: "Formulario Ciudad",
			height: 250,
			width: 550,
			modal: true,
			buttons: {
                            "Aceptar": function() {
                                var flag = $("#formProvincia").valid();
                                if(flag){
                                    $.ajax({
                                        type: 'POST',
                                        url: 'Administracion',
                                        data: $('#formProvincia').serialize(),
                                        success: function(res){
                                            $('#listProvincias').html(res);
                                        },
                                        error:function(){alert("Error! al registrar la provincia")}
                                    });
                                    $( this ).dialog( "close" );
                                }
                            },
                            Cancelar: function() {
                                $( this ).dialog( "close" );
                            }
			},
			close: function() {
                            // implementar lo que convenga
			}
		});
                
               // boton addPais
               $.fn.addProvincia = function(idPais,nombrePais){
                    // primero reseteamos :)
                    $('#formProvincia').each(function(){
                        this.reset();
                    });
                    
                    $("#idPais").val(idPais);
                    $("#nombrePais").val(nombrePais);
                    $("#idCiudad2").removeAttr("disabled");
                    cargarCiudades(idPais);
                    
                    $("#titleForm").text("Nueva Provincia");
                    $("#accion").val("27");
                    $( "#dialog:ui-dialog" ).dialog( "destroy" );
                    $( "#dialogo" ).dialog( "open" );
                    $("#nombre").focus();
               }
               
               // funcion que modifica un pais
                $.fn.editar = function(idPais,idCiudad,idProvincia,nombre,sigla,nomCiudad,nomPais){
                    $("#titleForm").text("Modificar Ciudad");
                    $("#accion").val("28");
                    $("#idPais").val(idPais);
                    $("#idProvincia").val(idProvincia);
                    $("#nombrePais").val(nomPais);
                    $("#idCiudad").val(idCiudad);
                    $("#idCiudad2").html("<option value=''>Seleccione</option><option>"+nomCiudad+"</option>");
                    $("#idCiudad2").attr("disabled","true");
                    
                    $("#nombre").val(nombre);
                    $("#sigla").val(sigla);
                    $( "#dialog:ui-dialog" ).dialog("destroy");
                    $("#dialogo").dialog("open");
                    $("#nombre").focus();
                }
               
                // baja cliente corporativo
                $.fn.eliminar = function(idPais,idCiudad,idProvincia,nombre){
                    if(confirm("¿Esta seguro de eliminar la provincia ''"+nombre+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:29 , idPais:idPais, idCiudad:idCiudad,idProvincia:idProvincia, nombre:nombre},
                            success:function(res){
                                $('#listProvincias').html(res);
                            },
                            error: function(res){ alert("Error! al eliminar la provincia."); }
                        });
                    }
                }
                
                // baja cliente corporativo
                $.fn.darBaja = function(idPais,idCiudad,idProvincia,nombre){
                    if(confirm("¿Estas seguro de dar de baja la provincia ''"+nombre+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:30 , idPais:idPais, idCiudad:idCiudad,idProvincia:idProvincia, nombre:nombre},
                            success:function(res){
                                $('#listProvincias').html(res);
                            },
                            error: function(res){ alert("Error! al dar de baja la provincia"); }
                        });
                    }
                }
                
                // alta cliente corporativo
                $.fn.darAlta = function(idPais,idCiudad,idProvincia,nombre){
                    if(confirm("¿Esta seguro de dar de Alta la provincia ''"+nombre+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:31 , idPais:idPais, idCiudad:idCiudad,idProvincia:idProvincia, nombre:nombre},
                            success:function(res){
                                $('#listProvincias').html(res);
                            },
                            error: function(res){ alert("Error! al dar de alta la PROVINCIA."); }
                        });
                    }
                }
                
                // cambio de pais
                $("#idPaisSel").change(function(){
                    $("#idPaisSel option:selected").each(function (){
                        $("#idPaisSel option:selected").each(function (){
                            idPais = $(this).val();
                            nombre = $(this).text();
                            $.ajax({
                                url: "Administracion",
                                type: "GET",
                                data:{ accion:32 , idPais:idPais},
                                success:function(res){
                                    $('#listProvincias').html(res);
                                },
                                error: function(res){ alert("Error! al dar de alta la PROVINCIA."); }
                            });
                        });
                    });
                });
                
                $("#idCiudad2").change(function(){ // si cambia de ciudad tambien cambiamos en la variable auxiliar
                    $("#idCiudad2 option:selected").each(function (){
                        $("#idCiudad").val($(this).val());
                    });
                });
            });
            
            function cargarCiudades(idPais){
                var lista = document.getElementById("idCiudad2");
                var j = 2;
                var k = 1;
                lista.selectedIndex = 0;
                for(i = 0; i<ciudadesPorPais.length; i++){
                    if(idPais == ciudadesPorPais[i][0]){
                        lista.length = j;
                        lista.options[k].value = ciudadesPorPais[i][1];
                        lista.options[k].text = ciudadesPorPais[i][2];
                        k++;
                        j++;
                    }
                }
                if(j == 2)
                    lista.length = 1;
            }
                
            // muestra oculta
            function mostrarOcultar(){
                if(document.getElementById("provinciasBaja").style.display == 'none'){
                    document.getElementById("provinciasBaja").style.display = 'block';
                    document.getElementById("verOcultar").value = "Ocultar Bajas";
                    document.getElementById("verOcultar").title="Pulsa aqui para ocultar bajas";
                }else{
                    document.getElementById("provinciasBaja").style.display = 'none';
                    document.getElementById("verOcultar").value = "Mostrar Bajas"
                    document.getElementById("verOcultar").title="Pulsa aqui para mostrar bajas";
                }
            }
            
        </script>
    </head>
    <body onload="showTime(<%=s_param%>)">
        <div id="top-wrap">
            <!-- cabeza principal -->
            <%@include file="../../../../head.jsp" %>
            
            <!-- cuerpo -->
            <div id="bodySpace">               
                <!-- aqui va la ruta -->
                <div class="clearfix" id="middle" style="position: absolute">
                    <!-- aqui va el arbol de entrada -->
                    <div id="breadcrumb"><!-- le da la forma de la imagen -->
                        <ul>
                        <li><a href="<%=s_path%>/principal.jsp">Home</a></li>
                        <li><span style="color:#666">Administraci&oacute;n</span></li>
                        <li><span style="color:#666">Administraci&oacute;n Provincia</span></li>
                        <li class="current-page"><span class="end"><span class="middle">Provincia</span></span></li>
                        </ul>
                        <!-- para la hora -->
                        <!--<div style="clear: both;position: absolute;text-align: right;width: 100%;"><span id="fechaServ"></span>&nbsp;&nbsp;<span id="horaServ" style=""></span>&nbsp;</div>-->
                    </div><!-- begin SIDEBAR FIRST -->
                </div>
                
                <div id="principal">
                    <!-- izquierda -->
                    <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                        <div class="izq">
                            <%@include file="../../../../bodyIzq.jsp" %>
                        </div>
                        <div class="medio" style="border: 0px solid">
                                <label for="idPais" ><b>Seleccione Pa&iacute;s :</b></label>
                                <select name="idPaisSel" id="idPaisSel"  title="Seleccione PAIS">
                                    <option value="">Seleccione</option>
                                <%
                                    for(Pais p : paises)
                                        out.println("   <option value='"+p.getIdPais()+"' "+((p.getIdPais() == idPais)?"selected='true'":"")+">"+p.getNombre()+"</option>");
                                %>    
                                </select><br/>
                            
                            <center>
                            <div id="listProvincias">
                                
                            <h2 class="decorado">Lista de Provincias de ''<%=pDefault.getNombre()%>''</h2>
                            <table class="miReporte" style="width: 100%">
                                <tr>
                                    <td style="text-align: right"><input type="button" class="boton" value="A&ntilde;adir Nueva Provincia" onclick="$.fn.addProvincia(<%=pDefault.getIdPais()%>,'<%=pDefault.getNombre()%>')"/></td>
                                </tr>
                            </table>
                            <table class="tabla_decorado" style="width: 100%">
                                <thead>
                                    <tr><!--  -->
                                        <th width="5%" class="th_decoradoRowspan">Nro</th>
                                        <th width="30%" class="th_decoradoRowspan">CIUDAD</th>
                                        <th width="30%" class="th_decoradoRowspan">NOMBRE</th>
                                        <th width="10%" class="th_decoradoRowspan">SIGLA</th>
                                        <th width="25%" class="th_decoradoRowspan">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                            <%
                                int i = 1;
                                for(Provincia p : privinciasPorPais){
                            %>          
                                    <tr class="tr_decorado">
                                        <td class="th_decorado" style="text-align: center"><%=i%></td>
                                        <td class="th_decorado"><%=p.getCiudad().getNombre()%></td>
                                        <td class="th_decorado"><%=p.getNombre()%></td>
                                        <td class="th_decorado"><%=p.getSigla()%></td>
                                        <td class="td_decoradoDerecha" style="text-align: center">
                                            <input type="button" value="Editar" onclick="$.fn.editar(<%=p.getIdPais()%>,<%=p.getIdCiudad()%>,<%=p.getIdProvincia()%>,'<%=p.getNombre()%>','<%=p.getSigla()%>','<%=p.getCiudad().getNombre()%>','<%=pDefault.getNombre()%>')" class="botonRep" title="Pulsa aqui para editar provincia"/>
                                            <input type="button" value="Dar Baja" onClick="$.fn.darBaja(<%=p.getIdPais()%>,<%=p.getIdCiudad()%>,<%=p.getIdProvincia()%>,'<%=p.getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de baja"/>
                                            <input type="button" value="Eliminar" onClick="$.fn.eliminar(<%=p.getIdPais()%>,<%=p.getIdCiudad()%>,<%=p.getIdProvincia()%>,'<%=p.getNombre()%>')" class="botonRep" title="Pulsa aqui para eliminar"/>
                                        </td>
                                    </tr>
                            <%      i++;
                                }
                                if(i == 1){
                                    out.write("<tr class='tr_decorado'>");
                                    out.write("     <td class='td_decorado' colspan='5' style='text-align:center'><p style='color:red'>La pais ''"+pDefault.getNombre()+"'' no tiene provincias registradas!<p></td>");
                                    out.write("</tr>");
                                }
                            %>
                                </tbody>
                            </table>
                            <!-- boton que muestra y oculta los paises dedos de baja -->    
                            <table class="miReporte" style="width: 100%">
                                <tr>
                                    <td style="text-align: right"><input type="button" name="verOcultar" id="verOcultar" value="Mostrar Bajas" onclick="mostrarOcultar()" class="boton" title="Pulsa aqui para mostrar bajas"/></td>
                                </tr>
                            </table><br/><br/>
                                
                            <!-- para mostrar bajas -->
                            <div id="provinciasBaja" style="display:none;">
                                <center>
                                    <h2 class="decorado">Provincias dados de baja del pa&iacute;s ''<%=pDefault.getNombre()%>''</h2>
                                <table class="tabla_decorado" style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th width="5%" class="th_decoradoRowspan">Nro</th>
                                            <th width="30%" class="th_decoradoRowspan">CIUDAD</th>
                                            <th width="30%" class="th_decoradoRowspan">NOMBRE</th>
                                            <th width="10%" class="th_decoradoRowspan">SIGLA</th>
                                            <th width="25%" class="th_decoradoRowspan">ACCION</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                <%
                                    i = 1;
                                    for(Provincia p : privinciasPorPaisInactivos){
                                %>          
                                        <tr class="tr_decorado">
                                            <td class="th_decorado" style="text-align: center"><%=i%></td>
                                            <td class="th_decorado"><%=p.getCiudad().getNombre()%></td>
                                            <td class="th_decorado"><%=p.getNombre()%></td>
                                            <td class="th_decorado"><%=p.getSigla()%></td>
                                            <td class="td_decoradoDerecha" style="text-align: center">
                                                <input type="button" value="Dar Alta" onClick="$.fn.darAlta(<%=p.getIdPais()%>,<%=p.getIdCiudad()%>,<%=p.getIdProvincia()%>,'<%=p.getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de alta la provincia ''<%=p.getNombre()%>''"/>
                                            </td>
                                        </tr>
                                <%      i++;
                                    }
                                    if(i == 1){
                                        out.write("<tr class='tr_decorado'>");
                                        out.write("     <td class='td_decorado' colspan='5' style='text-align:center'><p style='color:red'>No existen Provincias dados de baja de ''"+pDefault.getNombre()+"''!<p></td>");
                                        out.write("</tr>");
                                    }
                                %>
                                    </tbody>
                                </table>
                                </center>
                            </div> <!-- End prpovincias id='provinciasBaja' -->
                            
                            <%
                                i = 0;
                                out.println("<script type='text/javascript'>");
                                out.println(" ciudadesPorPais = new Array();");
                                for(Ciudad c : ciudadesPorPais){
                                    out.println(" ciudadesPorPais["+i+"] = new Array("+c.getIdPais()+","+c.getIdCiudad()+",'"+c.getNombre()+"')");
                                    i++;
                                }                
                                out.println("</script>");
                            %>
                            
                            </div> <!-- End id="listProvincias" -->
                                
                            <div id="dialogo"><br/>
                                <h2 class="decorado" id="titleForm"></h2><br/>
                                <form id="formProvincia" method="POST">
                                    <input type="hidden" name="accion" id="accion" value="0" />
                                    <input type="hidden" name="idPais" id="idPais" value="0" />
                                    <input type="hidden" name="idCiudad" id="idCiudad" value="0" />
                                    <input type="hidden" name="idProvincia" id="idProvincia" value="0" />
                                    <div style="clear:both;">
                                        <label class="form_align35" >Pais : </label>
                                        <input type="text" name="nombrePais" id="nombrePais" value="" class="required form_input_align" readonly="true" disabled="true"/>
                                        <label class="error">*</label>
                                    </div>
                                    <div style="clear:both;">
                                        <label class="form_align35" >Ciudad : </label>
                                        <select name="idCiudad2" id="idCiudad2" class="required form_input_align" title="Seleccione una ciudad!">
                                            <option value="">Seleccione</option>
                                        </select>
                                        <label class="error">*</label>
                                    </div>
                                    
                                    <div style="clear:both;">
                                        <label class="form_align35" >Nombre : </label>
                                        <input type="text" name="nombre" id="nombre" value="" class="required form_input_align" title="Ingrese Nombre Provincia" maxlength="40"/>
                                        <label class="error">*</label>
                                    </div>
                                    <div style="clear:both;">
                                        <label class="form_align35" >Sigla : </label>
                                        <input type="text" name="sigla" id="sigla" value="" class="required form_input_align" title="Ingrese Sigla Provincia" maxlength="5"/>
                                        <label class="error">*</label>
                                    </div>
                                </form>
                            </div> <!-- FIN DIV id="dialogo" -->
                                
                            </center>
                        </div>
                    </div><!--end of leftPan-->
                    
                    <div class="yDer" style="border: 1px solid #ccc;">
                        <%@include file="../../../../publicidad.jsp" %>                       
                    </div><!--end of rightPan-->
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->
        </div>
    </body>
</html>
